import HeaderBar from "../../components/header/HeaderBar";
import infoImg from "../../common/img/infoBackGround.webp";
import avatar from "../../common/img/avatar.png";
import dynBanner from "../../common/img/dynBanner.webp";
import "./dynamic.css";
import { Link } from "react-router-dom";

function DynamicListItem({ avatarImg, desc }) {
  return (
    <div className="dyn-list__item">
      <div className="dyn-item">
        <div className="dyn-item__main">
          <div className="dyn-item__avatar">
            <div className="dyn-avatar-container" style={{ width: "48px", height: "48px" }}>
              <div className="dyn-avatar" style={{ width: "48px", height: "48px", transform: "translate(0px, 0px)" }}>
                <img src={avatarImg} alt="" />
              </div>
            </div>
          </div>
          <div className="dyn-item__header">
            <div className="dyn-title">
              <span className="dyn-title__text">珑琦Ronki</span>
            </div>
            <div className="dyn-time">22分钟前</div>
          </div>
          <div className="dyn-item__body">
            <div className="dyn-content">
              <div className="rich-text">
                {desc}
              </div>
            </div>
          </div>
          <div className="dyn-item__footer">
            <div className="dyn-item__action">
              <div className="dyn-action forward">
                <i className="dyn-action__icon"></i>
                22
              </div>
            </div>
            <div className="dyn-item__action">
              <div className="dyn-action comment">
                <i className="dyn-action__icon"></i>
                33
              </div>
            </div>
            <div className="dyn-item__action">
              <div className="dyn-action like">
                <i className="dyn-action__icon"></i>
                66
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Dynamic({ loginAction }) {
  return (
    <div className="dynamic-container">
      <HeaderBar subClass={" fixed-header"} loginAction={loginAction} />
      <div className="bg"></div>
      <div className="dynamic-home">
        <aside className="left">
          <section>
            <div className="dyn-my-info">
              <div className="dyn-my-info__header">
                <div className="info-img" style={{ backgroundImage: `url(${infoImg})` }}></div>
              </div>
              <div className="dyn-my-info__content">
                <Link to={"/space"} className="dyn-my-info__face" >
                  <div className="info-img" style={{ backgroundImage: `url(${avatar})` }}></div>
                </Link>
                <Link to={"/space"} className="dyn-my-info__name" >
                  珑琦Ronki
                </Link>
                <div className="dyn-my-info__stats">
                  <Link to={"/space"} className="dyn-my-info__stat__item" >
                    <div className="dyn-my-info__stat__item__count">22</div>
                    <div className="dyn-my-info__stat__item__label">关注</div>
                  </Link>
                  <Link to={"/space"} className="dyn-my-info__stat__item" >
                    <div className="dyn-my-info__stat__item__count">33</div>
                    <div className="dyn-my-info__stat__item__label">粉丝</div>
                  </Link>
                  <Link to={"/space"} className="dyn-my-info__stat__item" >
                    <div className="dyn-my-info__stat__item__count">66</div>
                    <div className="dyn-my-info__stat__item__label">动态</div>
                  </Link>
                </div>
              </div>
            </div>
          </section>
        </aside>
        <main>
          <section>
            <div className="dyn-publishing">
              <div className="dyn-publishing__topic">
                {/* 占位 */}
              </div>
              <div className="dyn-publishing__input">
                <div className="rich-textarea">
                  <div placeholder="有什么想和大家分享的？" contentEditable="true" className="rich-textarea__inner" style={{ fontSize: "14px", lineHeight: "22px", minHeight: "22px" }}></div>
                </div>
              </div>
              <div className="dyn-publishing__control">
                <div className="dyn-publishing__tools">
                  {/* 占位 */}
                </div>
                <div className="dyn-publishing__headquarters">
                  <div className="dyn-publishing__action">
                    发布
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section>
            <div className="dyn-list-tabs">
              <div className="dyn-list-tabs__list">
                <div className="dyn-list-tabs__item active">全部</div>
                <div className="dyn-list-tabs__item">视频投稿</div>
                <div className="dyn-list-tabs__item">追番追剧</div>
                <div className="dyn-list-tabs__item">专栏</div>
              </div>
              <div className="dyn-list-tabs__highlight" style={{ transform: "translateX(20px)" }}></div>
            </div>
            <div className="dyn-list">
              <div className="dyn-list__items">
                <DynamicListItem avatarImg={avatar} desc={"你所热爱的，就是你的生活。"} />
                <DynamicListItem avatarImg={avatar} desc={`账号可以为邮箱也可以为手机号，测试账号的邮箱为email@example.com，手机号为13123456789，密码为password`} />
                <DynamicListItem avatarImg={avatar} desc={"很多内容因为时间原因都还没实现。"} />
                <DynamicListItem avatarImg={avatar} desc={"并且由于没写后端导致数据处理比较麻烦。"} />
                <DynamicListItem avatarImg={avatar} desc={"项目的文件目录也比较乱。"} />
                <DynamicListItem avatarImg={avatar} desc={"希望下次能做得更好。"} />
              </div>
            </div>
          </section>
        </main>
        <aside className="right">
          <section className="dyn-banner">
            <div className="dyn-banner__title">公告栏</div>
            <div className="dyn-banner__img">
              <div className="banner-img" style={{ backgroundImage: `url(${dynBanner})` }}></div>
            </div>
          </section>
        </aside>
      </div>
    </div>
  )
}

export default Dynamic;